<template>
	<u-popup :show="visible" closeable="true" :safeAreaInsetBottom="false" round="10" @close="$emit('cancel')">
		<view class="pl-30 pr-30 pt-90">
			<view class="flex">
				<image class="width-160 height-160 shrink0" :src="productData.FPic"></image>
				<view class="flex justify-between flex-column ml-20 w-100">
					<view class="fweigh-600 fsize-34">{{ productData.FName }}</view>
					<view class="flex justify-between">
						<view class="line-red">
							<text class="fsize-26">￥</text>
							<text class="fsize-36 fweigh-600">{{ productData.FPosPrice }}</text>
						</view>
						<actions :number="productData.number" @add="add" @minus="minus"></actions>
					</view>
				</view>
			</view>
			<view class="fsize-24 line-gray mt-40 line-height-28 fweight-500">{{ productData.description || '' }}</view>
			<scroll-view scroll-y class="scroll-view">
				<view class="materials" v-for="(material, index) in productData.materials" :key="index">
					<view class="group-name">{{ material.group_name }}</view>
					<view class="values">
						<view 
							class="value" 
							:class="{selected: value.is_selected===1}" 
							@tap="changeMaterialSelected(index, key, 0)"
							v-for="(value, key) in material.values" 
							:key="key">
							{{ value.FSpec || value.FName }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom">
				<view class="add-cart-btn" @tap="addToCart">
					<text class="">
						<text class="fsize-24">￥</text>
						<text>{{ (productData.FPosPrice * productData.number) * num}}</text>
					</text>
					<text class="ml-10">加入购车</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import Actions from '../actions/actions.vue'
	export default {
		name: 'ProductPopup',
		components: {
			Actions
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			product: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				productData: {},
				price: null,
				num: null,
			}
		},
		watch: {
			product(val) {
				this.productData = JSON.parse(JSON.stringify(val))
				if(this.productData.materials){
					this.price = this.productData.materials[0].values[0].FPosPrice,
					this.num = this.productData.materials[1].values[0].FQty || 1
					this.productData.FFoodID = this.productData.materials[0].values[0].FItemID
				}else {
					this.productData.FFoodID = this.productData.FSubItemID
				}
				this.$set(this.productData, 'number', 1)
			}
		},
		computed: {
			// getProductSelectedMaterials() {
			// 	if(this.productData.FSpecFlag === 1 && this.productData.materials) {
			// 		let materials = []
			// 		this.productData.materials.forEach(({values}) => {
			// 			values.forEach(value => {
			// 				if(value.is_selected) {
			// 					materials.push(value.FSpec || value.FName)
			// 				}
			// 			})
			// 		})
			// 		return materials.length ? materials.join('，') : ''
			// 	}
			// 	return ''
			// }
		},
		methods: {
			changeMaterialSelected(index, key, selectType) {
				const currentMaterial = this.productData.materials[index].values[key]
					if(currentMaterial.is_selected) return
					if(index === 0){
						this.price = currentMaterial.FPosPrice
						this.productData.FPosPrice = this.price
						this.productData.FFoodID = currentMaterial.FItemID
					}else if(index === 1) {
						this.num = currentMaterial.FQty
					}
					if(selectType === 0){
						this.productData.materials[index].values[key].is_selected = this.productData.materials[index].values[key].is_selected === 0 ? 1 : 0
					}else {
						this.productData.materials[index].values.forEach(value => this.$set(value, 'is_selected', 0))
						currentMaterial.is_selected = 1
					}
					this.productData.number = 1
					this.productData.FConvert = this.num
			},
			add() {
				this.productData.number += 1
			},
			minus() {
				if(this.productData.number == 1) {
					return
				}
				this.productData.number -= 1
			},
			addToCart() {
				const product = {
					...this.productData, 
					// 'materials_text': this.getProductSelectedMaterials,
				}
				this.$emit('add-to-cart', product)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-cancel{
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		opacity: 0.2;
	}
	.scroll-view{
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #777;
		border-top: 1px #EDEDED solid;
		padding-top: 40rpx;
		margin-top: 40rpx;
		min-height: 1vh;
		max-height: calc(100vh - 100rpx - 426rpx - 250rpx);
		
		.materials {
			margin-bottom: 20rpx;

			.group-name {
				padding: 10rpx 0;
			}
			
			.values {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;
				
				.value {
					background-color: #f5f5f7;
					color: 26rpx;
					padding: 10rpx 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 12rpx;
					
					&.selected {
						background-color: #E0A32D;
						color: #fff;
					}
				}
			}
		}
	}
	.bottom {
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		position: relative;
		z-index: 11;
		
		.add-cart-btn {
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
			text-align: center;
			font-weight: bold;
			color:#111111;
			background: linear-gradient(34deg, #F3C45D, #EDAC2F);
			border-radius: 45rpx;
		}
	}
</style>
